<script setup lang="ts">

import useStore from "../store/index.js"
import {storeToRefs} from "pinia"
// 1、获取pinia仓库
//   根据store在模板中使用  {{store.num}}
let store = useStore()
console.log(store)

// 可以解构的方式拿去store中的状态
// 解决办法：为了使解构出来的数据，具有响应式效果，可以使用storeToRefs  API
// let {num,msg} = store
let {num,msg} = storeToRefs(store)


// 2、改变store中的状态
// （1）直接修改state中的数据  一个一个修改
//  (2)通过调用store中的$patch进行修改
// (3)调用state中actions里的方法  进行修改


// （1）直接修改state中的数据  一个一个修改
function add(){
    store.num++,
    store.msg="嘿嘿嘿"
}

//  (2)通过调用store中的$patch进行修改
function change(){
    // store.$patch({
    //     num:666,
    //     msg:'嘻嘻嘻'

    // })
    // store中的$patch 也可以传一个回调函数
    store.$patch((state)=>{
        state.num = 3333
    })
}

// (3)调用state中actions里的方法  进行修改状态
function subnum(){
    store.subnum()
}

function subnumAsync(){
    store.subnumAsync()
}



</script>

<template>

<div>
    首页有
    <div>pinia仓库中的数据;{{store.num}}===={{store.msg}}</div>
    <div>解构方式获取到的数据num:{{num}}====msg：{{msg}}</div>
    <button @click="add">num++</button>
    <br/>
    <button @click="change">修改state状态</button>
    <br/>
    <button @click="subnum">调用action里的同步方法修改状态</button>
    <br />>
    <button @click="subnumAsync">调用action里的异步方法修改状态</button>
    <div>获取store中的计算属性：{{store.getlength}}</div>
</div>
</template>